<template>
	<view class="app-container">
		<u-navbar title="修改我的信息" :autoBack="true" leftIconColor="#fff" placeholder bgColor="#cf141a" :titleStyle="{ color: '#fff' }"></u-navbar>
		<view class="container">
			<u--form labelPosition="left" :model="form" ref="uForm" labelWidth="130rpx">
				<u-form-item labelWidth="0rpx">
					<u--text text="上传头像" margin="0 0 15rpx 0"></u--text>
					<view class="upload-item flex flex-align-center flex-justify-center" @click="upload('photo', '头像上传中，请稍等')">
						<u-icon name="camera-fill" size="40rpx" v-if="photo === ''"></u-icon>
						<image :src="photo" mode="widthFix" v-else style="width: 96%"></image>
					</view>
				</u-form-item>
				<u-form-item label="昵称">
					<u--input v-model="form.uname" border="none" placeholder="请输入昵称"></u--input>
				</u-form-item>
				<u-form-item label="手机号码">
					<u--input v-model="form.tel" type="number" maxlength="11" border="none" placeholder="请输入手机号码" clearable></u--input>
				</u-form-item>
			</u--form>
			<u-button type="primary" shape="circle" text="保存" color="#cf141a" :customStyle="{ marginTop: '55rpx', height: '93rpx' }" @click="apiUserEdit"></u-button>
		</view>
	</view>
</template>

<script>
import { baseUrl } from '@/utils/config.js';
export default {
	data() {
		return {
			form: {
				tel: '',
				uname: '',
				photo: ''
			},
			photo: ''
		};
	},
	onLoad() {},
	methods: {
		apiUserEdit() {
			this.$api
				.apiUserEdit({
					uid: uni.getStorageSync('uid'),
					...this.form
				})
				.then((res) => {
					uni.showToast({
						icon: 'none',
						title: '修改成功'
					});
					setTimeout(() => {
						this.$toPath.backPage(1);
					}, 1000);
				});
		},
		upload(key, loadText, item) {
			if (key === 'lifePhoto' && item !== '') {
				return;
			}
			uni.chooseImage({
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.showLoading({
						title: loadText
					});
					uni.uploadFile({
						url: baseUrl + '/api/community/imageupload', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',
						success: (uploadFileRes) => {
							uni.hideLoading();
							const res = JSON.parse(uploadFileRes.data);
							if (key === 'photo') {
								this.form.photo = res.file;
								this.photo = tempFilePaths[0];
							}
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.app-container {
	/deep/ .u-steps {
		margin-top: 50rpx;
	}

	.container {
		margin: 30rpx 58rpx 0;
		padding-bottom: 76rpx;

		/deep/ .u-form {
			.u-form-item {
				background: #f0f0f0;
				padding: 0 30rpx;
				border-radius: 30rpx;
				margin-top: 30rpx;

				&:first-child {
					margin-top: 0;
				}

				.u-textarea {
					background-color: transparent;
				}
			}
		}

		.upload-item {
			width: 180rpx;
			height: 180rpx;
			background: #fff;
			overflow: hidden;
			position: relative;
		}
	}
}
</style>
